/**
 * 验证 useEffect 的逻辑
 */

import React, { useState, useEffect } from 'react'
import { Button } from 'antd'

function requestData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ res: 'ok' })
    }, 1000)
  })
}

function Demo() {
  let [num, setNum] = useState(0)
  useEffect(() => {
    if (num > 5) {
      console.log('@1')
    }
  }, [])

  // useEffect(async () => {
  //   let res = await requestData()
  //   console.log('res::: ', res)
  // }, [])

  useEffect(() => {
    // 1. 使用 then 调用链
    requestData().then(data => {
      console.log('data:: ', data)
    })

    // 2. 内部生成一个函数用来异步获取数据
    let next = async function next() {
      let res = await requestData()
      console.log('res::: ', res)
    }
    next()
  }, [])

  let handleClick = () => {
    setNum(num + 1)
  }

  return <div>
    <div id='num'>{num}</div>
    <Button onClick={handleClick}>新增</Button>
  </div>
}

export default Demo